<template>
  <section>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户信息" name="information">
        <el-form ref="informationForm" :model="informationForm" label-width="100px" :rules="informationFormRules">
          <el-form-item label="登录名" prop="loginName">
            <span>{{ informationForm.loginName }}</span>
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="informationForm.userName" auto-complete="off" />
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="informationForm.email" auto-complete="off" />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="informationForm.mobile" auto-complete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="dbLoading" @click.native="dbSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="password">
        <el-form ref="passwordForm" :model="passwordForm" label-width="100px" :rules="passwordFormRules">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" auto-complete="off" type="password" placeholder="原密码" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" auto-complete="off" type="password" placeholder="新密码" />
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input
              v-model="passwordForm.confirmPassword"
              auto-complete="off"
              type="password"
              placeholder="确认新密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="dbLoading" @click.native="dbSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
import Api from '@/api/api'
import Tool from '@/utils/tool'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        callback()
      }
    }
    var validatePassConfirm = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      Tool,
      activeName: 'information',
      menus: {},
      dbLoading: false,
      informationFormRules: {
        userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        loginName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
        email: [{ type: 'email', required: true, message: '请输入正确的邮箱地址', trigger: 'blur' }]
      },
      // 编辑界面数据
      informationForm: {
        userId: 0,
        userName: '',
        loginName: '',
        email: '',
        mobile: ''
      },
      passwordFormRules: {
        oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [{ validator: validatePass, required: true, trigger: 'blur' }],
        confirmPassword: [{ validator: validatePassConfirm, required: true, trigger: 'blur' }]
      },
      // 编辑界面数据
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getInfo() {
      this.dbLoading = true
      Api.http
        .get(Api.ajaxUrl + '/users/information')
        .then(data => {
          this.informationForm = Object.assign({}, data.user)
          this.dbLoading = false
        })
        .catch(err => {
          if (err) {
            console.log(err)
          }
          this.dbLoading = false
        })
    },
    dbSubmit: function() {
      const vue = this
      vue.$refs[this.activeName + 'Form'].validate(valid => {
        if (valid) {
          vue.$confirm('确认提交吗？', '提示', {}).then(() => {
            vue.dbLoading = true
            const params = Object.assign({}, vue[this.activeName + 'Form'])
            console.log(params)
            Api.http
              .put(Api.ajaxUrl + '/users/' + this.activeName, params)
              .then(data => {
                vue.dbLoading = false
                vue.$message({
                  message: '提交成功',
                  type: 'success'
                })
                if (this.activeName === 'information') {
                  vue.getInfo()
                } else {
                  vue.$refs[this.activeName + 'Form'].resetFields()
                }
              })
              .catch(err => {
                if (err) {
                  console.log(err)
                }
                vue.dbLoading = false
              })
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
